<fieldset id="contenedorListaPreguntas">
	<div id="textoListaRespuestas">
		<p style="font-size: 15px; text-align:left;" >Selecciona un tema y un nivel para ver todas preguntas de esta categoria. <br/>
			Selecciona una de las preguntas existentes para ver las respuestas asociadas a ella. <br/>
			Para validar, seleccionar la casilla valida correspondiente a la respuesta o respuestas que se desean validar y después guardar. <br/>
			Para modificar, seleccionar la linea de la tabla correspondiente a la respuesta que se desea modificar.	
		</p>
	</div>
	<br/>
	<div id="seleccion" class="form-inline" >

			<fieldset>
				<div id="asignatura" class="form-group">
					<label  for="asignaturas" class="col-sm-3 control-label">Tema:</label> 
					<div class="col-sm-3">
						<select id="asignaturas" name="idAsignatura" class="form-control " required>
							<option value="">-- Tema --</option>
						</select>
					</div>
				</div>
				<div id="nivel" class="form-group">
					<label  for="dificultades" class="col-sm-3 control-label">Nivel:</label>
					<div class="col-sm-3">
						<select id="dificultades" name="idDificultad" class="form-control" required>
							<option value="">-- Nivel --</option>
						</select>
					</div>
				</div>
				<input type="button" class="btn btn-primary" value="Buscar Preguntas" id="buscarPreguntas"/>
			</fieldset>
	</div>
		
	<br/>
	<br/>	
		
	<table id="contenedorPreguntas" class="table table-bordered table-striped table-hover table-responsive">
		<thead>
				<th>Enunciado</th>
		</thead>
	</table>

	<form>
		<table class="table table-bordered table-striped table-hover table-responsive"
			id="contenedorRespuestas">
			<thead>
				<th>Correcta</th>
				<th>Contenido de la respuesta</th>
				<th>Creada por</th>
				<th>Valida</th>
			</thead>
		</table>
	<input type="submit" id="guardar" value="Guardar" class="btn btn-primary">
	</form>
	
	
</fieldset>
	
<script>
var idPreguntaSeleccionada;
var idRespuesta;

//El one sirve para llamarlo solo una vez
$(document).one("ajaxComplete", seleccion);
function seleccion() {

	// Cargar asignatura
	var $asignaturas = $('#asignaturas');
	var urlAsignatura = "../dispatcher/referencias/asignaturas";

	$.getJSON(urlAsignatura, function(datos) {
		$.each(datos, function(i, item) {
			$asignaturas.append('<option value="'+ item.id +'">'
					+ item.nombre + '</option>');
			$asignaturas.append(item.nombre);
		});

	});

	// Cargar dificultades
	var $dificultades = $('#dificultades');
	var urlDificultad = "../dispatcher/referencias/dificultad";

	$.getJSON(urlDificultad, function(data) {
		$.each(data, function(i, item) {
			$dificultades.append('<option value="'+ item.id +'">'
					+ item.label + '</option>')
			$dificultades.append(item.label);
		});
		
	});
	
	
	

};

$("#buscarPreguntas").click(function() {
	$("#contenedorPreguntas > tbody > tr").remove();

	var asignatura = $('#asignaturas').val();
	var dificultad = $('#dificultades').val();
	
	var urlPreguntas = "../dispatcher/pregunta/recuperarPreguntas";
	urlPreguntas += "?asignaturaId="+ asignatura + "&dificultadId=" + dificultad;
	$.getJSON(urlPreguntas, function(data) {
		$.each(data, function(i, item){
			$('#contenedorPreguntas').append('<tr id='+ item.id +'> <td>' + item.enunciado + ' </td></tr>');
		});	
		
		$("#contenedorPreguntas > tbody").selectable({
			filter:"tr"
		});
		
		$("#contenedorPreguntas").on("selectableselecting", function( event, ui ) {
			if (idPreguntaSeleccionada != null) {
				$("#"+idPreguntaSeleccionada).removeClass("ui-selected");
			}
			idPreguntaSeleccionada = ui.selecting.id;
			
			$("#contenedorRespuestas > tbody > tr").remove();
			var urlRespuestas = "../dispatcher/respuesta/recuperarRespuestas";
			urlRespuestas += "?preguntaId="+ idPreguntaSeleccionada;

			$.getJSON(urlRespuestas, function(data) {
				$.each(data, function(i, item){
					var linea = "";
					
					linea += '<tr id='+ item.id +'>'
							+ '<td>' + item.correcta + '</td>'
							+ '<td>' + item.contenidoRespuesta + '</td>'
							+ '<td>' + item.creador + '</td>'
							+ '<td>' + ' <input  type="checkbox" name="valida" ';
							
					if (item.valida) {
						linea += ' checked="' + item.valida + '"';
					}		 
							
					linea += '"/> '
							+'</td>'
							+ '</tr>';
					
					$(contenedorRespuestas).append(linea);
				});
				$("#contenedorRespuestas").selectable({
					filter:"tr"
				});
				$("#contenedorRespuestas").on("selectableselecting", function( event, ui ) {
					idRespuesta = ui.selecting.id;
					$('#contenedorListaPreguntas').load('administracion/modificarRespuesta.html', { idRespuesta: idRespuesta});
				});
			});
		});
	});
});

/* 
$("#contenedorPreguntas").click(function(){
	
}); */

//Para hacer el submit del formulario
$('form').submit(function(event) {
	 
	event.preventDefault();
	
	
	var dataForm = [];
	
	$('form').find('tr').each(function() {
		var id = $(this).attr('id');
		var row = {};
		$(this).find('input').each(function() {
			row["valida"] = this.checked;
	    	row["id"] = id;
			dataForm.push(row);
		});
		
		
	}); 
	
	$.ajax({
		type : "POST",
		url : "../dispatcher/respuesta/validacionRespuestas",
		data : JSON.stringify(dataForm),
		beforeSend : function(xhr) {
			xhr.setRequestHeader("Accept", "application/json");
			xhr.setRequestHeader("Content-Type", "application/json");
		},
		success: function (datos) {
                  alert("Modificación registrada");
          },
          error : function (data, status, er) {
          	alert("error" + data + " status " +status+" er:"+er );
          }
	});

});

</script>